<template>
    <view class="content">
        <van-popup position="bottom" @click-overlay="closePopup" :show="showGuaranteePopup" round z-index=104
            custom-style="width: 100%;background:#ffffff;overflow: hidden; ">
            <view class="popup-content" :style="'height:' + (popupHeight) + 'px'">
                <!-- <scroll-view :refresher-enabled="false" class="scroll-content" scroll-y :lower-threshold="80"> -->
                <view class="popup-main">
                    <view style="display: flex; justify-content: space-between;">
                        <view class="popupTitle"> {{title}}</view>
                        <van-icon name="cross" color="#FFFFFF" size="15" @click="closePopup" />
                    </view>
                    <view class="modal-content">
                        <view class="item" v-if="computedGuarantees.PROPERTY_LOSS">
                            <view style="display: flex; align-items: center;justify-content: space-between;">
                                <view>
                                    <!-- <van-icon name="clock" size="20"></van-icon> -->
                                    <view class="box_title">财产损失</view>
                                </view>
                                <view class="left-arrow" @tap="toInfo('PROPERTY_LOSS')"> <van-icon name="arrow" /> </view>
                            </view>
                            <view class="box_content">商家在为用户提供服务过程中发生意外事故，造成用户财产损失</view>
                        </view>
                        <view class="item" v-if="computedGuarantees.SERVICE_ADD">
                            <view style="display: flex; align-items: center;justify-content: space-between;">
                                <view>
                                    <!-- <van-icon name="clock" size="20"></van-icon> -->
                                    <view class="box_title">服务加价</view>
                                </view>
                                <view class="left-arrow" @tap="toInfo('SERVICE_ADD')"> <van-icon name="arrow" /> </view>
                            </view>
                            <view class="box_content">商家未按照约定，对服务进行加价</view>
                        </view>
                        <view class="item" v-if="computedGuarantees.REFUND">
                            <view style="display: flex; align-items: center;justify-content: space-between;">
                                <view>
                                    <!-- <van-icon name="clock" size="20"></van-icon> -->
                                    <view class="box_title">随时退·过期提</view>
                                </view>
                                <view class="left-arrow" @tap="toInfo('REFUND')"> <van-icon name="arrow" /> </view>
                            </view>
                            <view class="box_content">未消费随时退、过期未消费自动退款</view>
                        </view>
                        <view class="item" v-if="computedGuarantees.RETURN">
                            <view style="display: flex; align-items: center;justify-content: space-between;">
                                <view>
                                    <!-- <van-icon name="clock" size="20"></van-icon> -->
                                    <view class="box_title">七天无理由退货</view>
                                </view>
                                <view class="left-arrow" @tap="toInfo('RETURN')"> <van-icon name="arrow" /> </view>
                            </view>
                            <view class="box_content">不支持七天无理由退货</view>
                        </view>
                    </view>
                    <van-toast id="van-toast" />
                </view>
                <!-- </scroll-view> -->
            </view>
        </van-popup>
    </view>
</template>

<script>

export default {
    props: {
        showGuaranteePopup: {
            type: Boolean,
            default: () => false
        },
        guarantees:{
            type: Array,
            default: () => ([])
        }
    },
    data () {
        return {
            curS:0,
            curSName:'',
            date: '',
            showMark: true, // 标记
            title: '保障说明',
            option: {},
            url: '',
            stepperValue:1,
            houseList:[
                // {
                // name:'王涛员',
                // tel:'1523623254',
                // house:'金鑫·滨湖一号3号楼1单元201',
                // isDefault:true
                // },
                // {
                //     name:'王涛员',
                //     tel:'1523623254',
                //     house:'金鑫·滨湖一号3号楼1单元201',
                //     isDefault:false
                // },
            ],
            userName:'王涛员',
            userTel:'1523623254',
            checkAll: false, // 标记是否全选
            checked: [], // 全选
            selectedRowKeys: [], // 已选择的数据的id
            selectedRows: [], // 已选择的数据
            inactiveIcon:
                'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/notChecked1126.png',
            activeIcon:
                'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/goodsChecked1126.png',
            disabledIcon:'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/disabledIcon.png',
            
            popupHeight:'300',
            // radio:1,
            // addressId:'',// 选中的地址id
            computedGuarantees :{
                'PROPERTY_LOSS': '财产损失险',
                'SERVICE_ADD': '服务加价',
                'REFUND': '随时退·过期提',
                'RETURN': '七天无理由退货'
            }

        }
    },
    computed: {
        // computedGuarantees() {
        //     return (this.guarantees || []).reduce((acc, curr) => {
        //         acc[curr.guaranteeType] = curr.guaranteeValue === "true"
        //         return acc
        //     }, {})
        // }
    },

  watch:{
    guarantees: {
          immediate: true, // 这句重要
          handler(v) {
              console.log(v, 'guarantees')
              v.forEach(item =>{
                  if (item.guaranteeType == 'PROPERTY_LOSS') {
                      this.computedGuarantees.PROPERTY_LOSS = item.guaranteeValue == 'true'
                  } else if (item.guaranteeType == 'SERVICE_ADD'  ) { 
                    this.computedGuarantees.SERVICE_ADD = item.guaranteeValue == 'true'
                  } else if (item.guaranteeType == 'REFUND'  ) {
                    this.computedGuarantees.REFUND = item.guaranteeValue == 'true'
                  } else if (item.guaranteeType == 'RETURN') {
                    this.computedGuarantees.RETURN = item.guaranteeValue == 'true'
                  }
              })
          },
      },

  },
    onLoad () { },
    onReady () {
    },

    methods: {
       
        // 关闭弹窗
        closePopup () {
            console.log('关闭 关闭关闭---------')
            this.$emit('closeSpecsPopup')
        },
        toInfo(type){

            uni.navigateTo({
                url: `/pages/other/guaranteeInfo?guaranteeType=${encodeURIComponent(type)}`
            })
        },

  },

}
</script>
<style lang="scss" scoped>

::v-deep .van-button__text {
    // display: inline-block;
    display: flex !important;
    flex-direction: column !important;
}
// 提示框
.popup-content {
    padding:24px;
    font-size: 12px;
    background: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    height: 50%;


    .popup-main {
        height: 100%
    }


    .popupTitle {
        font-size: 20px;
        text-align: left;
        color: #111111;
        line-height: 20px;
    }
}
.modal-content {
  margin-top: 20px;
}

.modal-content .item {
  margin-bottom: 10px;
}
.box_title{
    font-size: 32rpx;
    color: #111111;
}
.box_content{
    font-size: 28rpx;
    color: #666666;
    margin-top: 16rpx;
}
</style>

